import React, { useState, useEffect } from "react";
import { Button, Swiper, Image, Calendar, Cell } from "react-vant";
import { Exchange } from "@react-vant/icons";
import axios from "axios";
type Props = {};

const Home = (props: Props) => {
  const [state, setstate] = useState([]);
  const [value, setValue] = useState('北京')
  const [values, setValues] = useState('上海')
  const bian = () => {
    let a = value
    let b = values
    setValue(values)
    setValues(value)
    console.log(a, b);
  }
  const images = [
    "https://img2.baidu.com/it/u=970773241,4125552286&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=318",
    "https://img0.baidu.com/it/u=1911000799,4215738555&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=360",
    "https://img1.baidu.com/it/u=4167951536,3745336076&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500",
    "https://img2.baidu.com/it/u=2130719888,580780409&fm=253&fmt=auto&app=138&f=PNG?w=577&h=379",
  ];
  useEffect(() => {
    axios.get("http://localhost:4000/list").then((res) => {
      console.log(res.data);
      setstate(res.data);
    });
  }, []);
  return (
    <div className="homeBox">
      <div className="head">
        <div className="pp">
          <p className="p1">火车票预订</p>
          <p className="p2">便捷购票，服务您的每一次出行</p>
        </div>
      </div>
      <div className="add">
        <div
          style={{
            display: "flex",
            justifyContent: "space-around",
            width: "100%",
            height: "70px",
            lineHeight: "70px",
            fontSize: "21px",
          }}
        >
          <span>
          {value}
          </span>
          <p onClick={bian}><img className='imggg' src={require("../../icon/转换.png")} alt="" /></p>
          <span>{values}</span>
        </div>

        <div
          style={{
            display: "flex",
            justifyContent: "flex-start",
            width: "100%",
            height: "70px",
            lineHeight: "70px",
            fontSize: "21px",
          }}
        >
          <span>6月18日</span>
          <span>明天</span>
        </div>
        {/* <div>
          <Calendar>
            {(val:any, actions:any) => (
              <Cell
                isLink
                title="单个日期"
                value={val ? val.toLocaleDateString() : "请选择日期"}
                onClick={() => actions.open()}
              />
            )}
          </Calendar>
        </div> */}
        <Button color="#FF8D41" type="primary" size="large" className="btn">
          查询
        </Button>
        <div
          style={{
            display: "flex",
            justifyContent: "space-around",
            color: "#ccc",
            width: "100%",
            height: "50px",
            lineHeight: "50px",
            fontSize: "16px",
          }}
        >
          <span  style={{ color: "#999999"}}>北京-上海</span> <span style={{ color: "#666666",fontSize:"16px"}}>清除历史</span>
        </div>
      </div>
      <div className="demo-swiper">
        <Swiper>
          {images.map((image) => (
            <Swiper.Item key={image}>
              <Image lazyload src={image} />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
      <div className="listshu">
        <div className="title">
          <h3>出行快讯</h3> <span style={{ color: "#999999",fontSize:"16px"}}>更多 &gt;</span>
        </div>
        <div className="list">
          {state &&
            state.map((item: any, index) => {
              return (
                <div className="lists" key={index}>
                  <h3 style={{ fontSize: "17px" }}>{item.id}</h3>
                  <div className="left">
                    <p style={{ fontSize: "17px" }}>{item.title}</p>
                    <p
                      style={{
                        display: "flex",
                        justifyContent: " flex-start",
                        color: "#ccc",
                        fontSize: "13px",
                      }}
                    >
                      <span style={{ marginTop:"7px",color:"#B2B7C6" }}>{item.news}</span>
                      <span style={{ marginLeft: "20px",marginTop:"10px",color:"#B2B7C6" }}>{item.days}</span>
                    </p>
                  </div>
                  <div className="right" >
                    <Image width="100" height="80" src={item.images} style={{borderRadius: "5px"}}  />
                  </div>
                </div>
              );
            })}
        </div>
      </div>
    </div>
  );
};

export default Home;
